<script>
import { defineComponent, ref, onBeforeMount } from '@vue/composition-api';
import { GetActivityDetail } from '@/api/activity';
import Detail from '../components/detail';
import SeminarDetail from '../components/seminarDetail';
import MemberList from '../components/memberList';
import CancelApply from '../components/cancelapply';
import ClosingAudit from '../components/closingAudit';
import router from '@/router';
import { watch } from 'vue'
import { checkPermi, checkRole } from "@/utils/permission";

export default defineComponent({
  name: 'ActivityDetail',
  components: { Detail,SeminarDetail, MemberList, CancelApply,ClosingAudit },
  // activated(){
  //   getActivityDetail();
  // },
  setup() {
    // const checkPermi=()=>{};router.history.current.query.activityId;
    const activityId = router.history.current.params.activityId;
    const managerType = ref();
    const type = router.history.current.query.type;

    const activityDetail = ref({});
    const activeName = ref("0");

    const getActivityDetail = async () => {
      const response = await GetActivityDetail(activityId);
      if (response.code === 200) {
        activityDetail.value = response.data;
      }
    };

    const handleClick = (tab,event) => {
      activeName.value = tab.name
    };
    // const route = useRoute()
    // watch(
	  //     // () => route.fullPath,
	  //     () => {
	  //       if (route.name === 'ActivityDetail') {
	  //         getActivityDetail()
	  //       }
	  //     }
	  //   )

    onBeforeMount(() => {
      managerType.value = router.history.current.query.managerType;
      if (!activityId) {
        router.go(-1);
        return;
      }
      getActivityDetail();
    });
    return { checkPermi,activityId,managerType,activeName, activityDetail,handleClick };
  },
});
</script>

<template>
  <div class="app-container">
    <el-tabs type="card" v-model="activeName" @tab-click="handleClick">
      <el-tab-pane label="活动信息" name="0">
        <Detail :detail="activityDetail" :activityId="activityId" v-if="activeName==='0'" />
        <!-- <SeminarDetail :detail="activityDetail" v-if="activeName==='0' && managerType == 'seminar'" /> -->
      </el-tab-pane>
      <el-tab-pane label="全部参与" name="5">
        <MemberList :activityId="activityId" :activityStatus="activityDetail.activityStatus" :createdBy = 'activityDetail.createdBy' :mark2="0" v-if="activeName==='5'"/>
      </el-tab-pane>
      <el-tab-pane label="待签到" name="1">
        <MemberList :status="1" :activityId="activityId" :mark2="1" v-if="activeName==='1'" />
      </el-tab-pane>
      <el-tab-pane label="待签退" name="2">
        <MemberList :status="2" :activityId="activityId" :mark2="2" v-if="activeName==='2'" />
      </el-tab-pane>
      <el-tab-pane label="审核" name="7" >
        <ClosingAudit :detail="activityDetail" :activityId="activityId" v-if="activeName==='7'" />
      </el-tab-pane>
    </el-tabs>
  </div>
</template>
